import React from 'react';
import { Toast } from 'antd-mobile'

import { connect } from 'react-redux';

import { getReviewSupervisionCheck, postEmergencyCommit } from '../common/service'
import { saveData } from '../action/UserAction'
import NoPowerShow from '../component/NoPowerShow'

class SupervisionCheck extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			carNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.vehicleNum : '',
			equipmentArr: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.deviceIds : [],
			numPersonal: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.personNum : '',
			urgentText: '',  //应急事件描述
			cantConstruction: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.isconstruct : false,
			cantConstructionReason: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.remark : '' 
		}
	}

	commit() {
		const { hideLoadModal, changePage } = this.props;
		getReviewSupervisionCheck(this.props.userReducer.flowId) //流程id
		.then((data) => {
			const isOK = data.data;
			console.log(isOK);
			hideLoadModal();
			if (isOK.success) {
				this.props.dispatch(saveData(isOK.obj));
				if (isOK.obj.review && isOK.obj.review.status === 1) {
					changePage(20);
				} else {
					this.props.currentPage(isOK.obj.flowBaseInfo.flowProcesses);
				}
			} else {
				Toast.info(isOK.msg, 2);
			}
		})
		.catch((e) => {
			hideLoadModal();
			Toast.info('服务器异常', 2);
		})
	}

	emergencyCommit() {
		const { showLoadModal, hideLoadModal } = this.props;
		showLoadModal();
		if (this.state.urgentText.trim().length > 0) {
			postEmergencyCommit({
				event: this.state.urgentText.trim(),
				flowId: this.props.userReducer.flowId
			}) //流程id
			.then((data) => {
				const isOK = data.data;
				console.log(isOK);
				if (isOK.success) {
					this.commit()
				} else {
					hideLoadModal();
					Toast.info(isOK.msg, 2);
				}
			})
			.catch((e) => {
				hideLoadModal();
				Toast.info('服务器异常', 2);
			})
		} else {
			this.commit()
		}
	}
	
	render() {
		//判断是不是当前节点
		if (this.props.currentObj.flowId !== 11 || -1 === this.props.userReducer.roles.findIndex((value) => value === 72)) {
			return (<NoPowerShow id={this.props.currentObj.flowId}></NoPowerShow>);
		}
		if (!this.state.cantConstruction) {
			return (
				<div style={{padding: '1.42rem 0.2rem 0rem 0.2rem'}}>
					<div>
						<div style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
							<span	style={{fontSize: '0.32rem',fontWeight: 'bold'}}>
								无法施工
							</span>
						</div>
						<div className='cantConstruction'>
							<span style={{fontSize:'0.32rem'}}>原因</span>
							<p className='construction-plan-document'>{this.state.cantConstructionReason}</p>
						</div>
					</div>
					{	 -1 === this.props.userReducer.roles.findIndex((value) => value === 73) || !this.props.isTodayStep() ? null :
						<div 
							id='SecurityCheckBtns'
							className='SecurityCheckBtn'
							onTouchStart={()=>{document.getElementById('SecurityCheckBtns').style.backgroundColor = '#D97442'}}
							onTouchEnd={()=>{document.getElementById('SecurityCheckBtns').style.backgroundColor = '#FFA24A'}}
							onClick={()=>{
								this.emergencyCommit()
							}}
							>
							确认完毕
						</div>
					}
				</div>
			);
		}
		const {carNum,numPersonal,urgentText,equipmentArr} = this.state;
		return (
			<div style={{padding: '1.42rem 0.2rem 0rem 0.2rem'}}>
				<p className='num-title' style={{marginBottom: '0.54rem'}}>POD防范材料堆放点</p>
				<span className='num-title'>车辆数量</span>
				<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{carNum}</span>
				<span className='equipment-title'>设备</span>
				{equipmentArr.map((data, index) => {
					return (
						<div style={{paddingLeft: '0.15rem', marginBottom: '0.2rem'}} key={index}>
							<span style={{fontSize: '0.32rem',marginRight:'0.4rem', color: '#ccc'}}>{data.commonName}</span>
							<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{data.commonNum}</span>
						</div>
					);
				})}
				<div style={{marginTop: '0.6rem'}}>
					<span className='num-title'>人员数量</span>
					<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{numPersonal}</span>
				</div>
				<p className='init-construction-title' style={{marginTop: '0.54rem'}} >应急事件</p>
				<textarea 
					className='init-coonstruction-address'
				 	value={urgentText}
				  placeholder='请输入...'
				  onChange={(e)=>this.setState({urgentText: e.target.value})}>
				 </textarea>
				{ -1 === this.props.userReducer.roles.findIndex((value) => value === 73) ? null :
					<div 
						id='SecurityCheckBtns'
						className='SecurityCheckBtn'
						onTouchStart={()=>{document.getElementById('SecurityCheckBtns').style.backgroundColor = '#D97442'}}
						onTouchEnd={()=>{document.getElementById('SecurityCheckBtns').style.backgroundColor = '#FFA24A'}}
						onClick={()=>{
							this.emergencyCommit()
						}}
						>
						确认完毕
					</div>
				}
			</div>
		);
	}
}


function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(SupervisionCheck);
